<!--
 * Created by PhpStorm.
 * 版权所有: 2019~2022 [ hhygyl ]
 * Date: 2019/7/16-14:12
 * Link: http://luckyadmin.luckyhhy.cn
 * FileName: index.html
 **************************************************************
 *                                                            *
 *   .=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-.       *
 *    |                     ______                     |      *
 *    |                  .-"      "-.                  |      *
 *    |                 /            \                 |      *
 *    |     _          |              |          _     |      *
 *    |    ( \         |,  .-.  .-.  ,|         / )    |      *
 *    |     > "=._     | )(__/  \__)( |     _.=" <     |      *
 *    |    (_/"=._"=._ |/     /\     \| _.="_.="\_)    |      *
 *    |           "=._"(_     ^^     _)"_.="           |      *
 *    |               "=\__|IIIIII|__/="               |      *
 *    |              _.="| \IIIIII/ |"=._              |      *
 *    |    _     _.="_.="\          /"=._"=._     _    |      *
 *    |   ( \_.="_.="     `--------`     "=._"=._/ )   |      *
 *    |    > _.="                            "=._ <    |      *
 *    |   (_/                                    \_)   |      *
 *    |                                                |      *
 *    '-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-='      *
 *                                                            *
 *                    JUST FIND YOUR BUG !                    *
 **************************************************************
 *-->


<!-- 引入基类模板 -->
{extend name='public/base' /}

{block name="css"}   <!--样式区-->

<link rel="stylesheet" href="{__ADMIN_PATH}css/admin.css?v=312">
<link rel="stylesheet" href="{__ADMIN_PATH}css/sub-page.css">
<link rel="stylesheet" href="{__ADMIN_PATH}css/fileCommon.css">

<style >

    @media screen and (max-width: 420px) {
        .btnDiv {
            padding-top: 30px;
            text-align: left;
        }
    }

    .showBB .bottomBar {
        display: block;
    }

</style >

{/block}

{block name="search"}

{:widget('forms/search',array('filename','文件名称','请输入文件名称'))}

{/block}

{block name="btn"}
<div class="btnDiv">
    <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary "><i class="layui-icon"></i>刷新
    </button>

    <button id="dele_all" class="layui-btn layui-btn-sm layui-btn-danger">
        <i class="layui-icon layui-icon-delete"></i>批量删除
    </button>
    <button id="down_all" class="layui-btn layui-btn-sm layui-btn-normal">
        <i class="layui-icon layui-icon-download-circle"></i>打包下载
    </button>

  <!--  <button id="up_file" class="layui-btn layui-btn-sm layui-btn-warm">
        <i class="layui-icon layui-icon-upload-circle"></i>上传文件
    </button>-->
</div>
{/block}

{block name="table"} <!--表格区-->




<div class="file-list">
    {volist name="data.data" id="vo"}
    <div class="file-list-item"  data-url="{$vo['file_path']}" data-name="{$vo['filename']}" data-ext="{$vo['ext']}"   data-title="{$vo['filename']}">
        <div class="file-list-img media " data-id="{$vo['id']}" >

            {in name='$vo.ext' value="jpg,png,gif"}
            <img class="lazy" alt="ss" data-original="{$vo['file_path']}"  />
            {/in}

            {in name='$vo.ext' value="zip,rar,7z"}
            <img class="lazy" alt="ss" data-original="{__ADMIN_PATH}images/file.png}" />
            {/in}

            {eq name='$vo.ext' value="pdf"}
            <img class="lazy" alt="ss" data-original="{__ADMIN_PATH}images/pdf.png}" />
            {/eq}

            {eq name='$vo.ext' value="mp3"}
            <img class="lazy" alt="ss" data-original="{__ADMIN_PATH}images/mp3.png}" />
            {/eq}


            {eq name='$vo.ext' value="ppt"}
            <img class="lazy" alt="ss" data-original="{__ADMIN_PATH}images/ppt.png}" />
            {/eq}

            {eq name='$vo.ext' value="txt"}
            <img class="lazy" alt="ss" data-original="{__ADMIN_PATH}images/txt.png}" />
            {/eq}

            {in name='$vo.ext' value="mp4,mvw"}
            <img class="lazy" alt="ss" data-original="{__ADMIN_PATH}images/flash.png}" />
            {/in}

        </div>
        <div class="file-list-name">{$vo['filename']}</div>
        <div class="file-list-ck layui-form">
            <input type="checkbox" name="imgCk" value="{$vo['id']}" lay-skin="primary" />
        </div>
    </div>
    {/volist}
</div>

<!--分页开始-->
<div class="layui-row" style="text-align: center;">
    {$page}
</div>
<!--分页结束-->

{/block}

{block name="js"} <!--js处理区-->


<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a id="open"><i class="layui-icon layui-icon-file"></i> 查看 </a></li>
        <li><a id="copy" data-clipboard-text=""><i class="layui-icon layui-icon-release"></i> 复制 </a></li>
        <li><a id="down" data-clipboard-text=""><i class="layui-icon layui-icon-download-circle"></i> 下载 </a></li>
    </ul>
</div>



<script type="text/javascript" src="{__ADMIN_PATH}js/clipboard.min.js"></script>

<script type="text/javascript" src={__ADMIN_PATH}js/jquery.lazyload.min.js?v=1.9.1"></script>

<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn",threshold: 100});
    });
</script>

<script>

    layui.use(['jquery', 'layer', 'element', 'upload',  'lucky' ,'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var lucky = layui.lucky;
        var form = layui.form;

        form.render();

        var domain="{$domain}";

        // 刷新
        $('#btnRefresh').click(function () {
            location.reload();
        });
        var mUrl; //素材地址
        var show; //素材类型
        var names; //原始名称
        var _id; //素材id
        // 列表点击事件
        $('body').on('click', '.file-list-item > .file-list-img', function (e) {
            var name = $(this).parent().data('name');
            mUrl = $(this).parent().data('url');
            show=$(this).parent().data('ext');
            names=name;
            _id=parseInt( $(this).data('id'));
            //console.log(_id);
            $('#copy').attr('data-clipboard-text', domain+mUrl);
            var $target = $(this);
            $('#dropdownFile').css({
                'top': $target.offset().top + 90,
                'left': $target.offset().left + 25
            });
            $('#dropdownFile').addClass('dropdown-opened');
            if (e !== void 0) {
                e.preventDefault();
                e.stopPropagation();
            }
        });






        // 点击空白隐藏下拉框
        $('html').off('click.dropdown').on('click.dropdown', function () {
            $('#copy').attr('data-clipboard-text', '');
            $('#dropdownFile').removeClass('dropdown-opened');
        });


        // 打开
        $('#open').click(function () {
            if(show=="jpg"||show=="png" || show=="gif"){
                layer.photos({
                    photos: {
                        title: "查看图片",
                        data: [{
                            src: mUrl
                        }]
                    },
                    shade: .01,
                    closeBtn: 1,
                    anim: 5
                })
            }else {
                window.location.href="/admin/upload/down_img/id/"+_id; //下载附件
            }


        });

        //下载
        $("#down").click(function () {
            window.location.href="/admin/upload/down_img/id/"+_id; //下载附件
        });


        // 复制
        var clipboard = new ClipboardJS('#copy');
        clipboard.on('success', function (e) {
            e.clearSelection();
            layer.msg('文件地址已复制', {icon: 1});
        });
        clipboard.on('error', function (e) {
            layer.msg('复制失败，请手动复制', {icon: 2});
        });



        //批量删除
        $("#dele_all").click(function () {
            var numb =[];
            $('input:checkbox[name=imgCk]:checked').each(function(k){
                numb.push($(this).val());
            });
            if (numb.length>0){
                var ids = numb.join(',');
                // console.log(numb);
                layer.confirm('确定要删除选择的文件吗？', function(index){
                    var load=layer.load(2);
                    $.post("{:url('upload/del')}",{ids:ids},function (res) {
                        if (res.code==1){
                            layer.close(load);
                            layer.msg(res.msg,{kin: 'layui-layer-lan', icon:1,time:1500},function () {
                                layer.close(index);
                                location.reload();
                            });
                        }else {
                            layer.close(load);
                            layer.msg(res.msg,{kin: 'layui-layer-lan', icon:5,time:1000},function () {
                                layer.close(index);
                            });
                        }
                    },'json');
                });

            }else {
                layer.msg('未选择有效数据', {
                    anim: 6
                });
            }
        });


        //打包下载
        $("#down_all").click(function () {
            var numb =[];
            $('input:checkbox[name=imgCk]:checked').each(function(k){
                numb.push($(this).val());
            });
            if (numb.length>0){
                // var ids = numb.join(',');
                layer.confirm('确定要打包这些文件吗？', function(index){
                    layer.close(index);
                    window.location.href="/admin/common/down_file/ids/"+numb;
                });
            }else {
                layer.msg('未选择有效数据', {
                    anim: 6
                });
            }
        });


        $("#up_file").click(function () {
            lucky.CreateForm("上传图片到附件管理",'55%','65%',"{:url('upload/up_file')}");
            return false;
        });

    });
</script>


{/block}
